<admintpl file="header" />
<link rel="stylesheet" href="__PUBLIC__/css/jquery.datetimepicker.css">
<style type="text/css">
	.hidden{
		display: none;
	}
	.deleteCityHotShops{
		display: block;
		width: 30px;
		background: red;
		float: left;
		margin-left: 10px;
	}
</style>
</head>
<body>
	<div class="wrap">
		<!-- <ul class="nav nav-tabs">
			<li><a href="{:U('ad/index')}">{:L('ADMIN_AD_INDEX')}</a></li>
			<li class="active"><a href="{:U('ad/add')}">{:L('ADMIN_AD_ADD')}</a></li>
		</ul> -->
		<form method="post" class="form-horizontal"  action="/index.php?g=admin&m=activites&a=saveHotShop" enctype="multipart/form-data">
			<fieldset>
				<div class="control-group">
					<label class="control-label">搜索城市</label>
					<div class="controls"><select name="citylist" id="citySelectList">
						<volist name="citylist" id="city">
							<option value="{$city[cityId]}">{$city['cityName']}</option>
						</volist>
					</select> <br> <br>
						<input type="text" name="citySearch" placeholder="搜索城市">  <button class="citySearch">查询城市</button>
						<input type="hidden" class="" name="cityid">
						<br><br>
						<button class="hotShopSearch">查询</button>
					</div>
				</div>

			</fieldset>
			<div class="saveHotShop hidden">
				<hr>
			<fieldset >
				<div class="control-group">
					<label class="control-label">城市名称</label>
					<div class="controls">
						<span id="cityname">无</span>
						<input type="hidden" name="cityid" value="0">
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">该城市的火爆餐厅</label>
					<div class="controls">
						<table class="cityList table  table-hover table-bordered table-list" border="1" cellpadding="2" cellspacing="0">
							<tr>
								<td width="80px">Id</td>
								<td width="120px">餐厅名</td>
								<td width="80px">顺序</td>
								<td width="120px">图片</td>
								<td width="80px">操作</td>
							</tr>
						</table>
					</div>
				</div>


				<div class="control-group">
					<label class="control-label">搜索餐厅</label>
					<div class="controls">
						<input type="text" name="searchName" id="shopname">
						<button class="shopSearch">查询</button>
						<select name="shopid" id="shop_list">
						</select>
						<input type="hidden" name="manageShopId">
						<input type="hidden" name="shopName" value="">
						<span class="form-required tips"></span>
						<br><br>
						<button class="addHotShop">增加</button>
					</div>
				</div>
			</fieldset>
			<div class="form-actions">
				<button type="submit" class="btn btn-primary js-ajax-submit" style="float:left;">保存</button>
				<div  class="btn btn-warning js-ajax-submit deleteCityHotShops hidden">删除</div>
			</div>
			</div>
		</form>
	</div>
	<script src="__PUBLIC__/js/common.js"></script>

<script>
	$(function(){

		$('.citySearch').click(function(){
			var cityname = $('input[name="citySearch"]').val();
			var sel = document.getElementById('citySelectList');
			var isMatch = 0;
			if(cityname.trim() == ''){
				$('#citySelectList option').show();
				return false;
			}
			$('#citySelectList option').each(function(){
				var city = $(this).text();
				var city_val = $(this).val();
				if(city.indexOf(cityname) == -1){
					$(this).hide();
				}else{
					$(this).show();
					if(!isMatch) $('#citySelectList').val(city_val);
					isMatch = 1;
					console.log($(this).text());
				}
			});
			if(!isMatch){
				$('#citySelectList option').eq(0).show();
				$('#citySelectList').val(0);
			}
			return false;

		});

		$('.shopSearch').click(function(){
			var shopname = $('input[name="searchName"]').val();
			var cityid  = $('#citySelectList').val();
			$("#shop_list").html('');
			$.ajax({
				url:'/index.php?g=admin&m=activites&a=searchShop',
				type:"POST",
				data:{shopName:shopname,cityId:cityid},
				dataType:"JSON",
				success:function(data){
					console.log(data);
					if(data.shops.length>0) $("#shop_list").html('');
					$.each(data.shops,function(id,shop){
						var htm = '<option value="'+shop.shopId +'"data-shopname="' + shop.shopName +'" data-manage-shopid="'+ shop.manageShopId +'">'+ shop.shopName+'(' + shop.branchName +')</option>';
						$('input[name="manageShopId"]').val(shop.manageShopId);
						$('input[name="shopName"]').val(shop.shopName);
						$("#shop_list").append(htm);
						console.log(htm);
					});
				}});
			return false;
		});

		$('.hotShopSearch').click(function(){
			var cityid = $('#citySelectList').val();
			$.ajax({
				url:'/index.php?g=admin&m=activites&a=searchHotShops',
				type:'POST',
				data:{cityid:cityid},
				dataType:'JSON',
				success:function(data){
					console.log(data);
					$('input[name="cityid"]').val($("#citySelectList option:selected").val());
					$('#cityname').text($("#citySelectList option:selected").text());
					$('.saveHotShop').show();
					$('.deleteCityHotShops').show();
					parseHotShop(data.data);
				}
			});
			return false;
		});

		function parseHotShop(data){
			$('.cityList .shopDetail').remove();
			if(!data) return false;
			$.each(data,function(i,shop){
				console.log(shop);
				var htm ='<tr class="shopDetail">'+
						'<td width="80px">' + shop.branchId +'<input type="hidden" name="branchIds[]" value="'+shop.branchId +'"> </td>' +
						'<td width="120px">'+ shop.branchName +'<input type="hidden" name="branchNames[]" value="'+shop.branchName +'"></td>'+
						'<td width="80px"><input type="number" name="orders[]" value="0"/></td>'+
						'<td width="120px"><img src="'+shop.branchIconUrl+'"><input type="file" name="hotShopsImg[]" value=""/>' +
						'<input type="hidden" name="branchUrls[]" value="'+shop.branchIconUrl+'"></td>'+
						'<td width="80px"><a href="#" class="del">删除</a></td>'+
						'</tr>';
				$('.cityList').append(htm);
			});

		}

		$('.addHotShop').click(function () {
			var mid = $("#shop_list option:selected").attr("data-manage-shopid");
			var shopName = $("#shop_list option:selected").attr("data-shopname");
			$('.cityList').append("<tr class='hotShopsList'><td>"+mid+"<input type='hidden' name='branchIds[]' value='"+mid+"'></td>" +
					"<td>"+shopName+"<input type='hidden' name='branchNames[]' value='"+ shopName+"'> </td><td>" +
					"<input name='orders[]' type='number' value='0'></td><td>" +
					"<input type='file' name='hotShopsImg[]'/> </td><td><a href='#' class='del'>删除</a></td></tr>");
			return false;
		});

		$('.cityList a.del').live('click',function () {
			console.log($(this));
			$(this).parents('tr').remove();
		});

		$('.deleteCityHotShops').click(function(){
			var putcity = prompt("输入当前城市名称删除!","");
			if(putcity.trim() != $('#cityname').text() || !putcity) return false;
			var cityid = $('input[name="cityid"]').val();
			$.ajax({
				url:'/index.php?g=admin&m=activites&a=deleteHotShops',
				type:'POST',
				data:{cityid:cityid},
				dataType:'JSON',
				success:function(data){
					console.log(data);
					$('.cityList .shopDetail').remove();
				}
			});

			return false;
		});
	});
</script>
</body>
</html>